<template>
	<view>
		<carHeader>
			<slot>
				<uni-nav-bar color="white" :border="false" background-color="rgba(255,255,255,0.0)"
					left-icon="arrow-left" @clickLeft="back" :title="'选择城市'"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="now">
			<view>当前定位:</view>
			<view class="cit">
				<view class="aa">
					{{nowName}}
				</view>

				<view class="again" @click="again">
					<u-icon name="reload" color="#ffffff" size="40rpx"></u-icon>
				</view>
				<view class="dw">重新定位</view>
			</view>
		</view>

		<view class="hot">
			<view class="hotCity">
				<view class="title"> 热门城市</view>
				<view v-for="(item,index) in hotCities" :key="index" class="littleHot" @click="chooseCity(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="all">
			<view v-for="(item, index) in flattenedList" :key="index" class="cities">
				<view class="cityfirst">
					{{item}}
				</view>
				
				<view v-for="(i,index) in allCities[item]" :key="index" class="city" @click="chooseCity(i.name)">
					{{i.name}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowName: "",//现在定位
				hotCities: [],//热门城市
				allCities: {},//所有城市
				flattenedList: [], // 用于存储扁平化后的列表项
				local:""
			};
		},
		//页面加载时执行
		onLoad() {	
			this.nowCity();
			this.hotCity();
			this.allCity();			
		},
		
		methods: {
			//重新定位
			again(){
				this.nowCity();
			},
			//选择城市的点击事件
			chooseCity(req){
				console.log(req);
				this.local=req;
				this.nowName=req;
			},
			//返回首页
			back() {
				let dynamicData = {  
				  nowName:this.local,
				  id: 123,  
				  name: 'John Doe',  
				  
				};  
				  
				// 将动态数据转换为查询字符串  
				let queryString = Object.keys(dynamicData).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(dynamicData[key])}`).join('&');  
				  
				// 拼接URL并跳转  
				uni.navigateTo({  
				  url: `/pages/index/index?${queryString}`  
				});
				
				
		/* 		let local={nowName:this.local};
				let queryString = Object.keys(local).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(local[key])}`).join('&');  

				console.log("需要返回首页了");
				uni.navigateTo({
					url:"/pages/index/index?${queryString}"
				}) */
			},
			//获取当前位置
			nowCity() {
				uni.request({
					url: 'https://elm.cangdu.org/v1/cities?type=guess', // 这里指定具体的URL
					method: 'GET',
					success: (res) => {
						/* console.log(res.data);
						console.log(res.data.name); */
						this.nowName = res.data.name;
						this.local=this.nowName;
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			//获取热门城市
			hotCity() {
				uni.request({
					url: 'https://elm.cangdu.org/v1/cities?type=hot', // 这里指定具体的URL
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						this.hotCities = res.data;

					},
					fail: (err) => {
						console.error(err);
					}
				});

			},
			//获取所有的城市
			allCity() {
				uni.request({
					url: 'https://elm.cangdu.org/v1/cities?type=group', // 这里指定具体的URL
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						this.allCities = res.data;
						console.log("获取到所有城市的数据");
						// let arr = {};
						let arr = [];
						// let a=1;
						for (let inde in this.allCities) {
							let first = this.allCities[inde][0].abbr.substring(0, 1);
							arr.push(first);

						}
						this.flattenedList = arr.sort();
						console.log(this.flattenedList);
					},
					fail: (err) => {
						console.error(err);
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.now {
		font-size: 40rpx;
		color: #ffffff;
		line-height: 60rpx;
		position: relative;
		top: -240rpx;
		left: 30rpx;
	}

	.cit {
		line-height: 40rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		overflow: hidden;
	}

	.aa {
		float: left;
	}

	.again {
		line-height: 40rpx;
		float: left;
		margin-left: 430rpx;
	}

	.dw {
		float: left;
		line-height: 40rpx;
		margin-left: 4rpx;
	}

	.title {
		font-size: 40rpx;
		line-height: 100rpx;
		margin-left: 24rpx;
		margin-right: 20rpx;
		border-bottom: #EFEFEF solid 8rpx;
	}

	.hotCity {
		width: 95%;
		height: 470rpx;
		margin: 10rpx auto;
		background-color: #ffffff;
		position: relative;
		border-radius: 20rpx;
		top: -200rpx;
	}

	.littleHot {
		font-size: 36rpx;
		color: #A5A5A5;
		text-align: center;
		line-height: 80rpx;
		width: 30%;
		background-color: #ffffff;
		float: left;
		border: #EFEFEF solid 2rpx;
		margin-top: 20rpx;
		margin-left: 16rpx;
		background-color: #F7F7F7;
		border-radius: 40rpx;
	}
	.all{
		border: #ffffff solid 2rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin:20rpx;
		position: relative;
		top: -180rpx;
	}
	.cityfirst{
		padding-top: 40rpx;
		padding-left: 50rpx;
		font-size: 40rpx;
		color: #464646;
	}
	.city{
		font-size: 36rpx;
		color: #A5A5A5;
		border-bottom: #F8F8F8  2rpx solid;
		margin: 10rpx ;
		padding-left: 40rpx;
		line-height: 88rpx;
	}
</style>